import $ from "jquery";
import {DELETED_CLASS, HIGHLIGHT_CLASS} from "~utils/constants";
import {removeHighlightEventListeners} from "~contents/hoverTools";
import {remove as removeViewstate} from "~storage/store";

const remove = async (highlightId, viewstate) => {
  console.log("inside remove highlight...");
  const highlights = $(`.highlighter--highlighted[data-highlight-id='${highlightId}']`);
  $('.highlighter--hovered').removeClass('highlighter--hovered');

  highlights.css('backgroundColor', 'inherit'); // Change the background color attribute
  highlights.css('color', 'inherit'); // Also change the text color
  highlights.removeClass(HIGHLIGHT_CLASS).addClass(DELETED_CLASS); // Change the class name to the 'deleted' version

  highlights.each((_, el) => { // Finally, remove the event listeners that were attached to this highlight element
    removeHighlightEventListeners(el);
  });

  const url = location.hostname + location.pathname;
  await removeViewstate(url, highlightId);
}

export default remove;
